<template>
  <div class="mv-container">
    <div class="mv-wrap">
      <h3 class="title">mv详情</h3>
      <!-- mv -->
      <div class="video-wrap">
        <video
          controls
          :src="playUrl"
        ></video>
      </div>
      <!-- mv信息 -->
      <div class="info-wrap">
        <div class="singer-info">
          <div class="avatar-wrap">
            <img :src="(mvData.artists && mvData.artists[0].img1v1Url)?mvData.artists[0].img1v1Url:mvData.cover" alt="" />
          </div>
          <span class="name">{{mvData.artistName}}</span>
        </div>
        <div class="mv-info">
          <h2 class="title">《{{mvData.name}}》</h2>
          <span class="date">发布：{{mvData.publishTime}}</span>
          <span class="number">播放：{{mvData.playCount}}次</span>
          <p class="desc">{{mvData.desc}}</p>
        </div>
      </div>
      <!-- 精彩评论 -->
      <div class="comment-wrap" v-if="hotComment && hotComment.length != 0">
        <p class="title">精彩评论<span class="number">({{hotComment.length}})</span></p>
        <div class="comments-wrap">
          <div class="item" v-for="(item,index) in hotComment" :key="index">
            <div class="icon-wrap" v-if="item.user">
              <img :src="item.user.avatarUrl" alt="" />
            </div>
            <div class="content-wrap">
              <div class="content" v-if="item.user">
                <span class="name">{{item.user.nickname}}：</span>
                <span class="comment">{{item.content}}</span>
              </div>
              <div 
               class="re-content" 
               v-if="item.beReplied && item.beReplied.length != 0" 
               v-for="(i,index) in item.beReplied" 
               :key="index"
               >
                <span class="name">{{i.user.nickname}}：</span>
                <span class="comment">{{i.content}}</span>
              </div>
              <div class="date">{{item.time}}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 最新评论 -->
      <div class="comment-wrap" v-if="comment && comment.length != 0">
        <p class="title">最新评论<span class="number">({{total}})</span></p>
        <div class="comments-wrap">
          <div class="item" v-for="(item,index) in comment" :key="index">
            <div class="icon-wrap" v-if="item.user">
              <img :src="item.user.avatarUrl" alt="" />
            </div>
            <div class="content-wrap">
              <div class="content" v-if="item.user">
                <span class="name">{{item.user.nickname}}：</span>
                <span class="comment">{{item.content}}</span>
              </div>
              <div 
               class="re-content" 
               v-if="item.beReplied && item.beReplied.length != 0" 
               v-for="(i,index) in item.beReplied" 
               :key="index"
               >
                <span class="name">{{i.user.nickname}}：</span>
                <span class="comment">{{i.content}}</span>
              </div>
              <div class="date">{{item.time}}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页器 -->
      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="page"
        :page-size="limit"
        :limit="limit"
      >
      </el-pagination>
    </div>
    <div class="mv-recommend" v-if="mvtj && mvtj.length != 0">
      <h3 class="title">相关推荐</h3>
      <div class="mvs">
        <div class="items">
          <div @click="tomv(item.id)" class="item" v-for="(item,index) in mvtj" :key="index">
            <div class="img-wrap">
              <img :src="item.cover" alt="" />
              <span class="iconfont icon-play"></span>
              <div class="num-wrap">
                <div class="iconfont icon-play"></div>
                <div class="num">{{item.playCount}}</div>
              </div>
              <span class="time">{{item.duration}}</span>
            </div>
            <div class="info-wrap">
              <div class="name">{{item.name}}</div>
              <div class="singer">{{item.artistName}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import getMV from '../utils/mv'
export default {
  name: 'mv',
  data() {
    return {
      // 总条数
      total: 0,
      // 页码
      page: 1,
      // 页容量
      limit: 12,
      mvData:{},
      playUrl:'',
      hotComment:[],
      comment:[],
      mvtj:[],
      toid:0,
    };
  },
  watch :{
      '$route': function (to, from) {
        this.getMvDetail(this.toid);
        this.playMv(this.toid);
        this.getComment(this.toid,this.limit,0);
        this.RecomMV(this.toid);
        this.page = 1;
      }
    },
  created(){
    this.getMvDetail(this.$route.query.q);
    this.playMv(this.$route.query.q);
    this.getComment(this.$route.query.q,this.limit,(this.page-1)*this.limit);
    this.RecomMV(this.$route.query.q);
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.getComment(this.$route.query.q,this.limit,(this.page-1)*this.limit);
    },
    getMvDetail(mvid){
      getMV.getMvData(mvid)
      .then(res => {
        console.log(res.data.data);
        this.mvData = res.data.data;
      })
    },
    getComment(mvid,limit,offset){
      getMV.mvComment(mvid,limit,offset)
      .then(res => {
        console.log(res.data);
        if(res.data.hotComments){
          this.hotComment = res.data.hotComments;
          for(let i = 0;i < this.hotComment.length;i++){
            this.hotComment[i].time = this.format(this.hotComment[i].time);
          }
        }
        this.comment = res.data.comments;
        for(let i = 0;i < this.comment.length;i++){
            this.comment[i].time = this.format(this.comment[i].time);
          }
        this.total = res.data.total;
      })
    },
    playMv(id){
      getMV.mvPlay(id).then(res => {
        console.log(res.data)
        this.playUrl = res.data.data.url;
      })
    },
    RecomMV(id){
      getMV.TJmv(id).then(res => {
        console.log(res.data);
        this.mvtj = res.data.mvs;
        this.mvtj.forEach(x => {
          if(x.playCount > 100000){
            x.playCount = parseInt(x.playCount/10000) + '万';
          } 
          x.duration = this.formatTime(x.duration);
        })
      })
    },
    tomv(id){
      this.$router.push(`/mv?q=${id}`);
      this.toid = id;
    },
    format(Time){
      var time = new Date(parseInt(Time));
      var y = time.getFullYear();
      var m = time.getMonth()+1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      if(m<10) m = '0' + m;
      if(d<10) d = '0' + d;
      if(h<10) h = '0' + h;
      if(mm<10) mm = '0' + mm;
      if(s<10) s = '0' + s;
      return y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + s;
    },
    formatTime(time) {
      let min = parseInt(time/1000/60);
      let sec = parseInt(time/1000%60);
      if(min < 10) {
        min = '0' + min;
      } 
      if(sec < 10) {
        sec = '0' + sec;
      }
      return (min + ':' + sec);
    },
  }
};
</script>

<style></style>
